import 'package:flutter/material.dart';

class RadioViewPage extends StatefulWidget {
  const RadioViewPage({super.key});

  @override
  State<RadioViewPage> createState() => _RadioViewPageState();
}

class _RadioViewPageState extends State<RadioViewPage> {
  int sex = 1;
  _radioChange(value) {
    setState(() {
      sex = value;
      print('_radioChange $sex');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Radio 相关'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text("男:"),
                Radio(
                  value: 1,
                  onChanged: _radioChange,
                  groupValue: sex,
                ),
                const SizedBox(width: 20),
                const Text("女:"),
                Radio(
                  value: 2,
                  onChanged: _radioChange,
                  groupValue: sex,
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[Text("$sex"), Text(sex == 1 ? "男" : "女")],
            ),
            RadioListTile(
                title: Text("男"),
                value: 1,
                groupValue: sex,
                onChanged: _radioChange),
            RadioListTile(
                title: Text("女"),
                value: 2,
                groupValue: sex,
                onChanged: _radioChange)
          ],
        ));
  }
}

class MSListTileRoute extends StatelessWidget {
  MSListTileRoute({Key? key}) : super(key: key);
  bool? _checkBoxValue1 = false;
  bool _switchValue1 = false;
  int? _radioGroupValue = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("MSListTileRoute")),
      body: ListView(
        children: [
          Builder(builder: (context) {
            return _buildCheckBoxListTile(context);
          }),
          Builder(builder: (context) {
            return _buildSwitchListTile(context);
          }),
          Builder(builder: (context) {
            return Column(
              children: [
                _buildRadioListTile(1, context),
                _buildRadioListTile(2, context),
                _buildRadioListTile(3, context),
              ],
            );
          }),
        ],
      ),
    );
  }

  _buildRadioListTile(int initValue, BuildContext context) {
    return RadioListTile(
      value: initValue, // 单选的值
      groupValue: _radioGroupValue, // 选择组的值
      toggleable: true, // 是否可返回不确定状态，默认false，为true时，再次选中时onChanged返回null
      activeColor: Colors.red[500], // 选中时填充颜色
      title: Text("RadioListTile - Title",
          style: TextStyle(color: Colors.black87, fontSize: 16)), // Title 组件
      subtitle: Text("RadioListTile - Subtitle",
          style: TextStyle(color: Colors.black38, fontSize: 14)), // Subtitle 组件
      dense: true, // 是否使用缩小布局
      isThreeLine: false, // 是否准备显示3行，默认false
      secondary: Icon(Icons.pets), // 辅助组件
      selected: _radioGroupValue == initValue, // Tile 是否选中
      controlAffinity: ListTileControlAffinity.platform, // radio组件布局位置
      contentPadding: EdgeInsets.all(8), // 内边距
      shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), //  形状
      tileColor: Colors.cyan[50], // Tile未选中颜色
      selectedTileColor: Colors.cyan[200], // Tile选中颜色
      visualDensity: VisualDensity(
          horizontal: -4, vertical: -4), // 紧凑程度，VisualDensity -4～4
      focusNode: FocusNode(skipTraversal: true), // 焦点控制
      enableFeedback: true, // 是否给予按压反馈
      // 点击事件回调
      onChanged: (int? value) {
        _radioGroupValue = value;
        // 重新Build
        (context as Element).markNeedsBuild();
      },
    );
  }

  _buildSwitchListTile(BuildContext context) {
    return SwitchListTile(
      value: _switchValue1, // value = true 时为打开状态，false 关闭
      tileColor: Colors.cyan[50], // Tile未选中颜色
      activeColor: Colors.red, // 打开状态下颜色
      activeTrackColor: Colors.amber, // 打开状态下轨道颜色
      activeThumbImage: AssetImage("assets/images/tx1.jpeg"), // 打开状态下滑块图片
      inactiveThumbColor: Colors.grey, // 关闭状态下滑块颜色
      inactiveTrackColor: Colors.red[200], // 关闭状态下轨道颜色
      inactiveThumbImage: AssetImage("assets/images/tx2.jpeg"), // 关闭状态下滑块图片
      title: Text("SwitchListTile - Title",
          style: TextStyle(color: Colors.black87, fontSize: 16)), // Title 组件
      subtitle: Text("SwitchListTile - Subtitle",
          style: TextStyle(color: Colors.black38, fontSize: 14)), // Subtitle 组件
      isThreeLine: false, // 是否准备显示3行，默认false
      dense: true, // 是否使用缩小布局
      contentPadding: EdgeInsets.all(8), // 内边距
      secondary: Icon(Icons.pets), // 辅助组件
      selected: _switchValue1, //  Tile是否选中
      autofocus: false, // 自动聚焦，默认为 false
      controlAffinity: ListTileControlAffinity.platform, // switch组件 布局位置
      shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), // 形状
      selectedTileColor: Colors.cyan[200], // Tile选中颜色
      visualDensity: VisualDensity(vertical: -4), // 紧凑程度，VisualDensity -4～4
      focusNode: FocusNode(skipTraversal: true), // 焦点控制
      enableFeedback: true, // 是否给予按压反馈
      hoverColor: Colors.red, // 悬停颜色 暂未使用
      // 点击事件 回调
      onChanged: (value) {
        _switchValue1 = value;
        // 重新Build
        (context as Element).markNeedsBuild();
      },
    );
  }

  _buildCheckBoxListTile(BuildContext context) {
    return CheckboxListTile(
      value: _checkBoxValue1, // 是否选中此复选框
      activeColor: Colors.red, // 选中时颜色
      checkColor: Colors.amber, // 选中时中间✔️颜色
      tileColor: Colors.cyan[50], // Tile 未选中时 颜色
      title: Text("CheckboxListTile - Title",
          style: TextStyle(color: Colors.black87, fontSize: 16)), // Title 组件
      subtitle: Text("CheckboxListTile - Subtitle",
          style: TextStyle(color: Colors.black38, fontSize: 14)), // Subtitle 组件
      isThreeLine: false, // 是否准备显示3行，默认false
      dense: true, // 是否使用缩小布局
      secondary: Icon(Icons.pets), // 辅助组件
      selected: _checkBoxValue1 == true, //  Tile是否选中
      autofocus: false, // 自动聚焦，默认为 false
      controlAffinity: ListTileControlAffinity.platform, // checkBox组件 布局位置
      contentPadding: EdgeInsets.all(8), // 内边距
      tristate: false, // 三态复选框，默认 false
      shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), // 形状
      selectedTileColor: Colors.cyan[200], // Tile选中颜色
      visualDensity: VisualDensity(vertical: -4), // 紧凑程度，VisualDensity -4～4
      focusNode: FocusNode(skipTraversal: true), // 焦点控制
      enableFeedback: true, // 是否给予按压反馈
      side: BorderSide(color: Colors.teal, width: 2.0), // CheckBox 边框
      // 点击事件回调
      onChanged: (value) {
        _checkBoxValue1 = value;
        // 重新Build
        (context as Element).markNeedsBuild();
      },
    );
  }
}
